<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="../static/js/echarts.min.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }

        .divclass {
            left: 0px;
            position: fixed;
            height: 30px;
            width: 100%;
        }
    </style>
</head>
<body>
<div style="position: relative">

    <div class="divclass" id="JingDongZhangJuBaoTaiYuan" style="background: red;"></div>
    <div class="divclass" id="BaiShiDianJiaShangHai"></div>
    <div class="divclass" id="MeiCaiZhengZhou" style="background: red;"></div>
    <div class="divclass" id="MeiCaiNanChang"></div>
    <div class="divclass" id="MeiCaiShenYang"></div>
    <div class="divclass" id="JingDongZhangJuBaoTianJin" style="background: red;"></div>
    <div class="divclass" id="JingDongZhangJuBaoZhongQing"></div>
    <div class="divclass" id="YiJiuPiJiNan"></div>
    <div class="divclass" id="YiJiuPiShenZhen"></div>
    <div class="divclass" id="BaiShiDianJiaNanChang"></div>
    <div class="divclass" id="YiJiuPiShiJiaZhuang"></div>
    <div class="divclass" id="BaiShiDianJiaWuHan"></div>
    <div class="divclass" id="BaiShiDianJiaWuXi"></div>
    <div class="divclass" id="YiJiuPiHeFei"></div>
    <div class="divclass" id="YiJiuPiChengDou"></div>
    <div class="divclass" id="BaiShiDianJiaZhengZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoWuHan"></div>
    <div class="divclass" id="BaiShiDianJiaQingDao"></div>
    <div class="divclass" id="MeiCaiShangHai"></div>
    <div class="divclass" id="JingDongZhangJuBaoHeFei"></div>
    <div class="divclass" id="BaiShiDianJiaZhangSha"></div>
    <div class="divclass" id="MeiCaiHeFei"></div>
    <div class="divclass" id="JingDongZhangJuBaoWenZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoBeiJing"></div>
    <div class="divclass" id="MeiCaiShiJiaZhuang"></div>
    <div class="divclass" id="MeiCaiBeiJing"></div>
    <div class="divclass" id="JingDongZhangJuBaoShenZhen"></div>
    <div class="divclass" id="MeiCaiMianYang"></div>
    <div class="divclass" id="MeiCaiJiNan"></div>
    <div class="divclass" id="BaiShiDianJiaXiAn"></div>
    <div class="divclass" id="MeiCaiXiAn"></div>
    <div class="divclass" id="JingDongZhangJuBaoSuZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoNanChang"></div>
    <div class="divclass" id="BaiShiDianJiaZhongQing"></div>
    <div class="divclass" id="MeiCaiQingDao"></div>
    <div class="divclass" id="BaiShiDianJiaZhangChun"></div>
    <div class="divclass" id="MeiCaiZhongQing"></div>
    <div class="divclass" id="MeiCaiZhangChun"></div>
    <div class="divclass" id="BaiShiDianJiaShenYang"></div>
    <div class="divclass" id="YiJiuPiZhangSha"></div>
    <div class="divclass" id="MeiCaiHengYang"></div>
    <div class="divclass" id="JingDongZhangJuBaoZhengZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoGuangZhou"></div>
    <div class="divclass" id="BaiShiDianJiaBeiJing"></div>
    <div class="divclass" id="JingDongZhangJuBaoHangZhou"></div>
    <div class="divclass" id="MeiCaiDaLian"></div>
    <div class="divclass" id="JingDongZhangJuBaoShangHai"></div>
    <div class="divclass" id="JingDongZhangJuBaoFoShan"></div>
    <div class="divclass" id="JingDongZhangJuBaoChengDou"></div>
    <div class="divclass" id="MeiCaiFuZhou"></div>
    <div class="divclass" id="MeiCaiShaMen"></div>
    <div class="divclass" id="BaiShiDianJiaChengDou"></div>
    <div class="divclass" id="MeiCaiHangZhou"></div>
    <div class="divclass" id="MeiCaiTianJin"></div>
    <div class="divclass" id="YiJiuPiFuZhou"></div>
    <div class="divclass" id="BaiShiDianJiaNanJing"></div>
    <div class="divclass" id="BaiShiDianJiaDaLian"></div>
    <div class="divclass" id="YiJiuPiShaMen"></div>
    <div class="divclass" id="MeiCaiGuangZhou"></div>
    <div class="divclass" id="BaiShiDianJiaTianJin"></div>
    <div class="divclass" id="BaiShiDianJiaFoShan"></div>
    <div class="divclass" id="MeiCaiFoShan"></div>
    <div class="divclass" id="YiJiuPiXiAn"></div>
    <div class="divclass" id="YiJiuPiBeiJing"></div>
    <div class="divclass" id="MeiCaiNanJing"></div>
    <div class="divclass" id="MeiCaiTaiYuan"></div>
    <div class="divclass" id="BaiShiDianJiaFuZhou"></div>
    <div class="divclass" id="MeiCaiNingBo"></div>
    <div class="divclass" id="BaiShiDianJiaShaMen"></div>
    <div class="divclass" id="JingDongZhangJuBaoNingBo"></div>
    <div class="divclass" id="BaiShiDianJiaGuangZhou"></div>
    <div class="divclass" id="MeiCaiGanZhou"></div>
    <div class="divclass" id="YiJiuPiNingBo"></div>
    <div class="divclass" id="MeiCaiWuHan"></div>
    <div class="divclass" id="MeiCaiShenZhen"></div>
    <div class="divclass" id="BaiShiDianJiaHeFei"></div>
    <div class="divclass" id="YiJiuPiZhangChun"></div>
    <div class="divclass" id="YiJiuPiNanJing"></div>
    <div class="divclass" id="JingDongZhangJuBaoHaErBin"></div>
    <div class="divclass" id="MeiCaiChengDou"></div>
    <div class="divclass" id="BaiShiDianJiaNingBo"></div>
    <div class="divclass" id="YiJiuPiShangHai"></div>
    <div class="divclass" id="MeiCaiSuZhou"></div>
    <div class="divclass" id="MeiCaiWuXi"></div>
    <div class="divclass" id="MeiCaiWenZhou"></div>
    <div class="divclass" id="BaiShiDianJiaJiNan"></div>
    <div class="divclass" id="JingDongZhangJuBaoShiJiaZhuang"></div>
    <div class="divclass" id="JingDongZhangJuBaoFuZhou"></div>
    <div class="divclass" id="BaiShiDianJiaHaErBin"></div>
    <div class="divclass" id="YiJiuPiGanZhou"></div>
    <div class="divclass" id="BaiShiDianJiaWenZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoZhangSha"></div>
    <div class="divclass" id="BaiShiDianJiaSuZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoDaLian"></div>
    <div class="divclass" id="JingDongZhangJuBaoQingDao"></div>
    <div class="divclass" id="MeiCaiZhangSha"></div>
    <div class="divclass" id="JingDongZhangJuBaoLuoYang"></div>
    <div class="divclass" id="BaiShiDianJiaHangZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoJiNan"></div>
    <div class="divclass" id="BaiShiDianJiaTaiYuan"></div>
    <div class="divclass" id="MeiCaiHaErBin"></div>
    <div class="divclass" id="JingDongZhangJuBaoShenYang"></div>
    <div class="divclass" id="YiJiuPiTaiYuan"></div>
    <div class="divclass" id="JingDongZhangJuBaoGanZhou"></div>
    <div class="divclass" id="JingDongZhangJuBaoZhangChun"></div>
    <div class="divclass" id="JingDongZhangJuBaoXiAn"></div>
    <div class="divclass" id="YiJiuPiZhongQing"></div>
    <div class="divclass" id="YiJiuPiDaLian"></div>
    <div class="divclass" id="BaiShiDianJiaShenZhen"></div>
</div>
<script type="text/javascript">
    var name = null;

    $(document).ready(function () {
        var websocket = null;

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://192.168.2.26:20008/mysqlWebSocket");
        } else {
            alert('Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            var reslut = eval("(" + event.data + ")");
            if (reslut) {
                $.each(reslut, function (i, item) {
                    console.log("city_pinyin" + item.city_pinyin + "item.city_top" + item.city_top)
                    showchart(item.city_pinyin, item.city, item.city_color, item.pro_price, item.city_url,item.city_top);
                });
            }
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    });

    function showchart(divid, city, city_color, pro_price, city_url,city_top) {
        var myChart = echarts.init(document.getElementById(divid));
        option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'item'  //悬浮提示框不显示
            },
            grid: {   //绘图区调整
                x: 150,  //左留白
                y: 10,   //上留白
                x2: 10,  //右留白
                y2: 10   //下留白
            },
            xAxis: [
                {
                    show: false,
                    type: 'value',
                    boundaryGap: [0, 0],
                    position: 'top',
                    rich: {
                        warnValue: {
                            height: 10,
                            align: 'center',
                            backgroundColor: {
                                image: "img/" + city_url + ".jpg"
                            }
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: [city],
                    axisLine: {show: false},     //坐标轴
                    axisTick: [{    //坐标轴小标记
                        show: false
                    }],
                    axisLabel: {
                        textStyle: {
                            fontSize: '30'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    tooltip: {show: false},
                    barMinHeight: 30,  //最小柱高
                    barWidth: 40,  //柱宽度
                    barMaxWidth: 100,   //最大柱宽度
                    data: [pro_price],
                    itemStyle: {
                        normal: {    //柱状图颜色
                            color: city_color,
                            label: {
                                show: true,   //显示文本
                                position: 'inside',  //数据值位置
                                textStyle: {
                                    color: '#000',
                                    fontSize: '30'
                                }
                            }
                        }
                    }
                }
            ]
        };
        window.onresize = function () {  //适应页面
            myChart.resize();
        }
        myChart.setOption(option);

        var aa = '#'+ divid
        $(aa).animate({top: city_top},1000);
    }
</script>
</body>
</html>
